import React, { useState } from "react";
import styles from "../style/quit.module.css";
import backIcon from "../img/left.png";
import userAvatar from "../img/biudifou.jpg";
import arrowRight from "../img/right.png";
import { useNavigate } from "react-router-dom";
function SettingsPage() {
  const navigate = useNavigate();
  const [showLogoutModal, setShowLogoutModal] = useState(false);

  const handleLogout = () => {
    setShowLogoutModal(true);
  };

  const confirmLogout = () => {
    console.log("用户已退出登录");
    navigate("/login");
  };

  const cancelLogout = () => {
    setShowLogoutModal(false);
  };

  return (
    <div className={styles.container}>
      {/* 顶部导航栏 */}
      <div className={styles.header}>
        <button className={styles.backButton}>
          <img src={backIcon} alt="返回" onClick={() => navigate(-1)} />
        </button>
        <h1 className={styles.title}>设置</h1>
      </div>

      {/* 用户信息区域 */}
      <div className={styles.userSection}>
        <img src={userAvatar} alt="用户头像" className={styles.avatar} />
        <div className={styles.userInfo}>
          <div className={styles.username}>张三</div>
          <div className={styles.userId}>账号: 1570978204</div>
        </div>
      </div>

      {/* 设置选项列表 */}
      <div className={styles.settingsList}>
        <div className={styles.settingItem}>
          <span>账户与安全</span>
          <img src={arrowRight} alt="" className={styles.arrow} />
        </div>
        <div className={styles.settingItem}>
          <span>收货地址</span>
          <img src={arrowRight} alt="" className={styles.arrow} />
        </div>
        <div className={styles.settingItem}>
          <span>信息设置</span>
          <img src={arrowRight} alt="" className={styles.arrow} />
        </div>
      </div>

      {/* 退出登录按钮 */}
      <button className={styles.logoutButton} onClick={handleLogout}>
        退出登录
      </button>

      {/* 退出登录确认弹窗 */}
      {showLogoutModal && (
        <div className={styles.modalOverlay}>
          <div className={styles.modalContent}>
            <div className={styles.modalHeader}>确认退出登录？</div>
            <div className={styles.modalBody}>您确定要退出当前账号吗？</div>
            <div className={styles.modalFooter}>
              <button className={styles.cancelButton} onClick={cancelLogout}>
                取消
              </button>
              <button className={styles.confirmButton} onClick={confirmLogout}>
                确认
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default SettingsPage;
